<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{padding: 0; margin: 0;}
		html{ height: 100%; }
		body{ display: flex; display: flex; align-items: center; justify-content: center; height: 100%;}
		.bear-box{ width: 600px; height: 600px;background-color: #5cd8fd; overflow: hidden; position: relative;}
		.bear{ width: 300px; height: 500px; position: absolute; bottom: -150px; left: 50%; margin-left: -150px; transform-origin: 150px 350px;}
		.head{ border-radius: 300px; background-color: #fff; height: 500px;}
		.ear{ width: 80px; height: 80px; background-color: #fff; border-radius: 50%; position: absolute;  top: 40px;}
		.left{left: -30px;}
		.right{ right: -30px; }
		.face{ position: absolute; background-color: #def9fe; width: 100px; height: 150px; border-radius: 100px;  left: 100px; top: 100px;}
		.eye-left{ position: absolute; top: -30px; left: 15px; background-color: #000; width: 16px; height: 16px; border-radius: 50%;}
		.eye-right{ position: absolute; top: -30px; right: 15px; background-color: #000; width: 16px; height: 16px; border-radius: 50%;}
		.nouse{ position: relative; background-color: #000; margin:10px 20px; height: 60px; border-radius: 50%;}
		.nouse .night{ position: absolute;  width: 15px; height: 15px; background-color: #fff; border-radius: 50%; top: 10px; left: 10px;}
		.mouse{ position: absolute; left: 40px; bottom: 20px; width: 20px; height: 6px; background-color: #000; border-radius: 6px; }
		.transition{ transition: all 0.2s ease; -webkit-transition: all 0.2s ease; }
	</style>
</head>
<body>
	<div class="bear-box" ms-controller="bear" ms-on-mouseenter="enter" ms-on-mouseleave="leave" ms-on-mousemove="move">
		<div class="bear" ms-css-transform="'rotate('+body+'deg)'" ms-class="transition: !isEnter">
			<div class="head">
				<div class="ear left" ms-css-transform="'translate3d('+ears.l.l+'px, '+ears.l.t+'px,0)'" ms-class="transition: !isEnter"></div>
				<div class="ear right" ms-css-transform="'translate3d('+ears.r.l+'px, '+ears.r.t+'px,0)'" ms-class="transition: !isEnter"></div>
				<div class="face" ms-css-transform="'translate3d('+face.l+'px, '+face.t+'px,0)'" ms-class="transition: !isEnter">
					<div class="eye-left" ms-css-transform="'scale('+eye.l+')'"  ms-class="transition: !isEnter"></div>
					<div class="eye-right" ms-css-transform="'scale('+eye.r+')'"  ms-class="transition: !isEnter"></div>
					<div class="tot">
						<div class="nouse" ms-css-transform="'translate3d('+nouse.l+'px, '+nouse.t+'px,0)'" ms-class="transition: !isEnter">
							<div class="night"></div>
						</div>
						<div class="mouse"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script src="avalon.mobile.js"></script>
	<script>
		var bearBox = avalon(document.querySelector('.bear-box'));
		var vm = avalon.define({
			$id: 'bear',
			isEnter: false,
			body: 0,
			ears:{
				l: {l:0, t:0},
				r: {l:0, t:0}
			},
			face: {
				l:0,
				t:0
			},
			nouse: {
				l: 0,
				t: 0
			},
			eye:{
				l: 1,
				r: 1
			},
			enter: render,
			move: render,
			leave: function(e){
				vm.isEnter = false;
				vm.ears.l.l = 0;
				vm.ears.l.t = 0;
				vm.ears.r.l = 0;
				vm.ears.r.t = 0;
				vm.face.l = 0;
				vm.face.t = 0;
				vm.nouse.l = 0;
				vm.nouse.t = 0;
				vm.eye.l = 1;
				vm.eye.r = 1;
				vm.body = 0;
			}
		});
		avalon.scan();
		function render(e){
			var offset = bearBox.offset();
			var toLeft = 300 - (e.clientX - offset.left);
			var toTop = 300-(e.clientY - offset.top);
			vm.ears.l.l = toLeft / 600 * 20;
			vm.ears.l.t = toTop / 600 * 20;
			vm.ears.r.l = toLeft / 600 * 20;
			vm.ears.r.t = toTop / 600 * 20;
			vm.face.l = -toLeft / 600 * 50;
			vm.face.t = -toTop / 600 * 50;
			vm.nouse.l = -toLeft / 600 * 20;
			vm.nouse.t = -toTop / 600 * 10;
			vm.eye.l = (300 - toLeft) / 300 * 0.2 + 0.8;
			vm.eye.r = (300 + toLeft) / 300 * 0.2 + 0.8;
			vm.body = -toLeft / 300 * 5;
			vm.isEnter = true;
		}
	</script>
</body>
</html>